<template>
	<view style="padding-bottom:200rpx;">
		<page-head :title="'我的试驾'" :headtype="2"></page-head>
		<view class="banner marginAuto">
			<uv-swiper class="banner" height="200" :list="bannerdata" keyName="image"></uv-swiper>
		</view>
		<view class="testmsg marginAuto">
			<view class="testmsg-name ellipsis01">{{ datas.article_name }}</view>
			<view class="testmsg-bm mainColor">{{ datas.num}}人报名</view>
			<view class="testmsg-time flex">
				<uv-icon style="margin-top: 2rpx;" name="clock" color="#666666" size="14"></uv-icon>
				<text style="margin-left:10rpx;">{{ datas.article_begin_time.substr(0,10) }} - {{ datas.article_end_time.substr(0,10) }}</text>
			</view>
		</view>
		<view class="itemmsg flex marginAuto">
			<view class="itemmsgtitle">试驾城市：</view>
			<view class="itemmsgr">{{ datas.city_name }}</view>
		</view>
		<!-- <view class="itemmsg flex marginAuto">
			<view class="itemmsgtitle">报名时间：</view>
			<view class="itemmsgr">2024.11.05  15:36:07</view>
		</view> -->
		<view class="itemmsg flex marginAuto" v-if="status == 2 ">
			<view class="itemmsgtitle">取消时间：</view>
			<view class="itemmsgr">{{ datas.cancel_time }}</view>
		</view>
		<view class="xq marginAuto">
			<view class="xqtitle">详情信息</view>
			<view class="xqimg">
				<uv-parse :content="datas.article_content"></uv-parse>
			</view>
		</view>
		<view class="testbtn flex">
			<block v-if="status == 1">
				<view class="testbtneach mainColor" style="width:30%;background:#D8F0FF;" @click="$refs.closetest.open()">取消</view>
				<view class="testbtneach baiColor mainBg flex" style="width:66%;">
					<view class="marginAuto">
						<image style="width:32rpx;height:32rpx;display: inline-block;position: relative;top:7rpx;" :src="apifun.serveimg+'qrcode.png'" mode=""></image>
						<!-- <text class="marginAuto" style="margin-left: 10rpx;" @click="qrcodefun()">出示签到码</text> -->
					</view>
				</view>
			</block>
			<view v-if="status == 3" class="testbtneach" style="width: 100%;background:#F0F0F0;color:#999999;">已取消</view>
			<block v-if="status == 2">
				<view class="testbtneach" style="width:100%;background:#FFEEEE;color:#FC2A2A;">已完成</view>
				<!-- <view class="testbtneach mainBg baiColor" style="width:46%;">去报名</view> -->
			</block>
		</view>
		<uv-popup ref="closetest" bgColor="none" round="20">
			<view class="closetest">
				<image class="closetestbg" :src="apifun.serveimg+'closetestbg.png'" mode=""></image>
				<view class="closetesttitle">确定要取消</view>
				<view class="closetestdoc">本次预约的试驾吗？</view>
				<view class="closetestbtn flex">
					<view class="closetestbtne mainColor" style="background: #ffffff;" @click="$refs.closetest.close()">取消</view>
					<view class="closetestbtne mainBg baiColor" @click="closeenter">确定</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				id:'',
				datas:{
					article_begin_time:'',
					article_end_time:''
				},
				bannerdata:[],
				status:1  // 1待到场  2 已取消  3 已完成
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.initData()
		},
		methods: {
			initData(){
				let sendData = {
					order_id:this.id
				}
				this.apifun.unirequest('/api/testDrive/detail','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
						this.status = datas.status; // 1待到场 2完成 3已取消 
						this.bannerdata =[{
							"image":this.apifun.URLimg+datas.article_img,
						}];
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			qrcodefun(){
				uni.setStorageSync('qrcode',this.datas.qrcode_url);
				this.apifun.navigate('/pages/my/mytestqrcode')
			},
			closeenter(){  // 取消订单
				let sendData = {
					order_id:this.id
				};
				this.apifun.unirequest('/api/testDrive/cancel','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.$refs.closetest.close();
						this.apifun.goback();
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	@import '@/public/alert.scss';
	page{
		background: #F7F7F7;
	}
	.banner{
		position: relative;
		z-index: 10;
		width:100%;
		height:200px;
	}
	.testmsg{
		width:650rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.testmsg-bm{
			display: inline-block;
			padding:10rpx;
			background:#E7F2FF;
			font-size:24rpx;
			line-height:20rpx;
			border-radius: 10rpx;
			margin:20rpx 0;
		}
		.testmsg-time{
			line-height: 50rpx;
			color:#666666;
			font-size: 24rpx;
		}
	}
	.itemmsg{
		width:630rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		line-height: 50rpx;
		justify-content: space-between;
		.itemmsgtitle{
			color: #333333;
			font-size: 28rpx;
		}
		.itemmsgr{
			color: #333333;
			font-size: 30rpx;
		}
	}
	.xq{
		width: 690rpx;
		.xqtitle{
			font-size: 34rpx;
			color: #222222;
			line-height:30rpx;
			margin: 30rpx 0;
			padding-left: 10rpx;
			border-left:5rpx solid #50F9FF;
		}
		.xqimg{}
	}
	.testbtn{
		position:fixed;
		bottom: 0;
		padding:30rpx 5%;
		width:90%;
		height: 100rpx;
		background: #fff;
		justify-content: space-between;
		.testbtneach{
			border-radius: 100rpx;
			line-height: 100rpx;
			height: 100rpx;
			text-align: center;
			font-size:30rpx;
		}
	}
</style>